<style lang="scss" scoped>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.s-kill {
  display: flex;
  flex-direction: column;
  width: 94%;
  //测试用高度
  height: 155px;
  margin: 10px auto;
  background: #fff;
  border-radius: 15px;

  .skill {
    position: relative;
    top: 10px;
    z-index: 1;
    display: flex;
    align-items: center;

    h4 {
      margin: 0;
      margin-left: 15px;
    }

    .field {
      display: flex;
      align-items: center;
      margin: 0px 8px;
      font-size: 14px;
      color: #EE0A24;

      .red {
        line-height: 26.92px;
      }

      img {
        width: 21px;
        height: 20px;
      }
    }

    .timer {
      display: flex;
      flex: 1;
      margin-left: 8px;

      .hour, .minutes, .second {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        background: #EE0A24;
        color: #fff;
      }

      .ellipsis {
        font-size: 12px;
        margin: 0 5px;
        color: gray;
      }
    }

    .skill-more {
      margin-right: 8px;
      font-size: 12px;
      color: #EE0A24;
    }
  }

  .price {
    font-size: 12px;

    .origin {
      color: gray;
      text-decoration: line-through;
    }

    .discount {
      color: #EE0A24;
    }

  }
}
</style>
<template>
  <div class="s-kill">
    <header class="skill">
      <h4>嗨购秒杀</h4>
      <div class="field">
        <div class="red">8</div>
        <img src="https://wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png"/>
      </div>
      <div class="timer">
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="skill-more">
        更多秒杀
      </div>
    </header>
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="(value,index) in goods" :key="index" @click="showDetail(value)">
        <img :src="value.swiper[0]" slot="icon" width="40"/>
        <div class="price" slot="text">
          <div class="discount">￥{{ discounts(value) }}</div>
          <div class="origin">￥{{ value.originprice }}</div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {requestSecondKill} from "../../api/commodity";
import Vue from "vue"
import {Grid, GridItem, Col, Row, CountDown} from "vant"

Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Col)
Vue.use(Row)
Vue.use(CountDown)

export default {
  name: "SecondKill",
  data() {
    return {
      goods: [],
      time: 5 * 60 * 60 * 1000,
      timeData: {
        hours: 10,
        minutes: 10,
        seconds: 10
      }
    }
  },
  mounted() {
    requestSecondKill({
      count: 0,
      limitNum: 5
    }).then(res => {
      // console.warn("comp=>", res)
      this.goods = res.data
    })
  },
  methods: {
    discounts(value) {
      // console.log(value)
      return Math.floor(value.originprice * value.discount / 10)
    },
    showDetail(value) {
      console.log(value.proid)
      this.$router.push("/shopDetail/" + value.proid)
    }
  },
  computed: {}
}
</script>
